*{margin: 0;padding: 0;text-decoration: none;} //设置所有元素的基本样式
//轮播图

#container{
  position: relative; //设置最外层的div元素的定位为相对定位，即是相对与未设置定位之前的位置进行定位
  width: 100%;
  height: 595px;
  //border: 3px solid #333;
  overflow: hidden; //设置容器的宽高，并将溢出部分设置为隐藏
}
#list{
  position: absolute; //设置图片所在的父级div的定位为绝对定位，即是相对于已定位的父级元素进行定位
  z-index: 1; //设置该div的显示层次
  width: 13321px; //该div是所有图片的父级元素，因此其宽高的设置应该包含所有的图片
  height: 595px;
}
#list img{
  float: left; //设置图片的显示的显示方式，为向左浮动
  width: auto;
  height: 595px;
}
#buttons{
  position: absolute; //设置屏幕下方的所有圆点的定位方式，相对于容器元素进行绝对定位
  left: 770px; //距离父级已进行定位的元素的左侧距离为250px
  bottom: 100px;
  z-index: 2; //设置圆点的显示层级为2，即是在图片div的上方
  height: 10px;
  width: 100%;
}
#buttons span{
  float: left;
  margin-right: 5px;
  width: 42px;
  height: 3px;
  border: 1px solid #fff;
  //border-radius: 50%; //半径为50%，即是设置为圆点显示
  //background: #333;
  cursor: pointer;
}
#buttons .on{
  background: orangered;
}
.arrow{
  position: absolute; //设置按钮的定位方式，即是相对与容器元素进行绝对定位
  top: 230px;
  z-index: 2;
  display: none;
  width: 40px;
  height: 40px;
  font-size: 36px;
  font-weight: bold;
  line-height: 39px;
  text-align: center;
  color: #fff;
  background-color: rgba(0,0,0,.3);
  cursor: pointer;
}
.arrow:hover{
  background-color: rgba(0,0,0,.7);
}
#container:hover .arrow{
  display: block;
}
#prev{
  left: 20px;
}
#next{
  right: 20px;
}


